<!-- 登录注册 -->
<template>
    <div class="pop-wrap">
        <h3 class="pop-title flex ali-c flexc">
            <span>有章</span>
            <i class="spot"></i>
            <span>司法实务</span>
        </h3>
        <div class="pop-cont">
            <el-tabs 
                class="mt25"
                :class="{'oneTab':isOneTab==true}"
                v-model="activeTab"
            >
                <el-tab-pane label="免密码登录" name="first">
                    <div class="tab-cont">
                        <div class="input-box flex ali-c">
                            <div class="fs14 c666">+86</div>
                            <div class="ml10 fs14 cccc" style="margin-top:-4px">|</div>
                            <input type="text" maxlength="11" class="input-style ml10" v-model.trim="userTel" placeholder="请输入您的手机号" />
                        </div>
                        <div class="mt25 flex ali-c jus-b">
                            <div class="input-box">
                                <input type="text" maxlength="6" class="input-style flex1" v-model.trim="userCode" placeholder="请输入验证码" />
                            </div>
                            <button class="code-btn" :class="{'opacity':!isShow}" @click="getImgCode">
                                <span v-show="isShow">获取验证码</span>
                                <span v-show="!isShow">{{ count }} s</span>
                            </button>
                        </div>
                        <div class="error-info">{{errorTxt}}</div>
                        <button class="login-btn" :class="{'active':isActiveBg==true}" @click="handleLogin">登录/注册</button>
                        <div class="mt10 fs12 c999">
                            未注册手机验证后自动登录，注册即代表同意
                            <a href="" target="_bank" style="color:#45A9DA">《用户协议》</a>
                            和
                            <a href="" target="_bank" style="color:#45A9DA">《免责申明》</a>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane v-if="!isOneTab" label="机构用户申请" name="second">
                    <div class="tab-cont">
                        <div class="apply-txt">
                            <img src="@/static/images/data_icon.png" class="apply-icon1">
                            <b class="fs18 ml10">海量数据随心看</b>
                        </div>
                        <div class="apply-txt mt15">
                            <img src="@/static/images/plan_icon.png" class="apply-icon2">
                            <b class="fs18 ml10">个性化定制服务周期</b>
                        </div>
                        <div 
                            class="contact-btn flex ali-c flexc"
                            v-clipboard:copy="phoneVal" 
                            v-clipboard:success="onCopySuccess" 
                            v-clipboard:error="onCopyError"
                        >
                            <i class="el-icon-service fs20" style="color:#E8C47B"></i>
                            <span class="ml10">4008-111-111</span>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
export default {
    name: "xszkLogin",
    props:{
        isShow:{
            type:Boolean,
            default:true,
        },
        count:{
            type:Number,
            default:0,
        },
        isLoginSucc:{
            type:Boolean,
            default:false,
        },
    },
    computed: {
       
    },
    data() {
        return {
            activeTab: 'first',
            isOneTab:false,
            isActiveBg:false,
            userTel:'',
            userCode:'',
            errorTxt:'',
            phoneVal:'4008-111-111',
        };

    },
    methods: {
        onCopySuccess(){
            this.toast.success('复制成功');
        },
        onCopyError(){
            this.toast.error('复制失败');
        },
        // handleTab(tab, event) {
        //     console.log(tab, event);
        // },
        handleLogin() {
            if(!this.isActiveBg){
                return false;
            }
            if(!this.userCode){
                this.errorTxt = '验证码不能为空';
                return false;
            };
            this.$emit("handleLogin",this.userTel,this.userCode);
        },
        getImgCode(){
            if(!this.isActiveBg){
                return false;
            }
            this.$emit("getImgCode",this.userTel);
        },
       
    },
    created() {
       
    },
    watch:{
        userTel(newVal,oldVal){
            if(newVal.length>0&&newVal.length==11){
                this.isActiveBg = true;
            }else{
                this.isActiveBg = false;
                this.errorTxt = '';
            }
        },
        userCode(newVal,oldVal){
            if(newVal){
                this.errorTxt = '';
            }
        },
        isLoginSucc:{
            handler(newVal,oldVal){
                if(newVal){
                    this.userTel = "";
                    this.userCode = "";
                }
            },
            immediate:true,
            deep:true
        }
    }

};
</script>

<style lang="stylus" scoped>
.pop-wrap
    width 100%
    min-height 455px
    background #fff
    border-radius 4px
    .pop-title
        width 100%
        height 53px
        font-family SimSun
        border-bottom 1px solid #E8C47B
        font-size 22px
        .spot
            display block
            margin 5px 5px 5px 7px
            width 3px
            height 3px
            border-radius 50%
            background #222
    .pop-cont
        padding 0 70px
        /deep/.oneTab .el-tabs__active-bar
            position absolute
            left 90px
            bottom 0
        /deep/.oneTab .el-tabs__item
            position relative
            left 90px
            width 95px
        /deep/.el-tabs__active-bar
            background #E8C47B
            height 3px
        /deep/.el-tabs__item
            padding 0 30px 0 40px !important
            font-size 18px
            height 35px
            line-height 35px
            color #999
        /deep/.el-tabs__item.is-active
            color: #E8C47B;
            font-weight bolder
        /deep/.el-tabs__nav-wrap::after 
            background none;
        .tab-cont
            margin-top 35px
            .input-box
                width 100%
                height 44px
                padding 0 40px
                background #F7F7F7
                border-radius 4px
                .input-style
                    display block
                    width 70%
                    height 100%
                    font-size 14px
            .code-btn
                cursor pointer
                flex-shrink 0
                width 100px
                height 44px
                line-height 44px
                border-radius 4px
                color #fff
                font-size 14px
                text-align center
                background #E8C47B
                margin-left 15px
                &.opacity
                    opacity 0.7
            .error-info
                margin-top 10px
                height 20px
                font-size 12px
                color #D91D1D
            .login-btn
                cursor pointer
                margin-top 15px
                width 100%
                height 52px
                line-height 52px
                text-align center
                border-radius 4px
                color #fff
                font-size 18px
                background #D8D8D8
                &.active
                    background #353539
                    color #E8C47B
        .apply-txt
            padding-left 70px
            .apply-icon1
                width 22px
                height auto
            .apply-icon2
                width 24px
                height auto
        .contact-btn
            cursor pointer
            width 100%
            height 52px
            margin-top 85px
            border-radius 4px
            background #353539
            color #E8C47B
            font-size 18px
</style>
